import { FC } from 'react'
import useStore from '@/store'

export const Father: FC = () => {
  // 调用 useStore，同时提供一个选择数据的选择器
  // state => 要访问的数据
  const bears = useStore((state) => state.bears)

  return (
    <>
      <h3>Father组件</h3>
      <p>小熊的数量是：{bears}</p>
      <hr />
      <Son1 />
      <hr />
      <Son2 />
    </>
  )
}

const Son1: FC = () => {
  const incrementBears = useStore((state) => state.incrementBears)
  const decrementBearsByStep = useStore((state) => state.decrementBearsByStep)
  const asyncIncrementBears = useStore((state) => state.asyncIncrementBears)

  return (
    <>
      <h5>Son1组件</h5>
      <button onClick={incrementBears}>bears+1</button>
      <button onClick={() => decrementBearsByStep(5)}>bears-5</button>
      <button onClick={asyncIncrementBears}>1秒后bears+1</button>
    </>
  )
}

const Son2: FC = () => {
  const resetBears = useStore((state) => state.resetBears)

  return (
    <>
      <h5>Son2组件</h5>
      <button onClick={resetBears}>重置bears</button>
    </>
  )
}
